<template>
  <el-aside :width="isCollapStatus ? '64px':'180px' ">
    <el-menu background-color='#545c64' text-color='#fff' :collapse="isCollapStatus" :collapse-transition="false">
      <h3>{{ !isCollapStatus?'通用后台管理系统':'后台' }}</h3>
      <el-menu-item
      v-for="item in noChildren"
      :index = "item.path"
      :key="item.path"
      >
        <component class="icons" :is="item.icon"></component>
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <el-sub-menu
      v-for="item in hasChildren"
      :index = "item.path"
      :key="item.path"
      >
          <template #title>
              <component class="icons" :is="item.icon"></component>
              <span>{{ item.label }}</span>
          </template>
        <el-menu-item-group>
          <el-menu-item
          v-for="(subItem,subIndex) in item.children"
          :index = "subItem.path"
          :key="subItem.path"
          >
          <component class="icons" :is="subItem.icon"></component>
          <span>{{ subItem.label }}</span>
        </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>

import { ref, computed } from 'vue'
import { useAllDataStore } from "@/stores"

const list =ref([
  {
    path:"/home",
    name: "home",
    label:"首页",
    icon: "house",
    url: "Home"
  },
  {
    path:"/mall",
    name: "mall",
    label:"商品管理",
    icon: "video-play",
    url: "Mall"
  },
  {
    path:"/user",
    name: "user",
    label:"用户管理",
    icon: "house",
    url: "User"
  },
  {
    path:"/other",
    name: "other",
    label:"其他",
    icon: "location",
    children: [
      {
        path:"/page1",
        name: "page1",
        label:"页面1",
        icon: "setting",
        url: "page1"
      },
      {
        path:"/page2",
        name: "page2",
        label:"页面2",
        icon: "setting",
        url: "page2"
      }
    ]
  }
])

const noChildren = computed(() => list.value.filter(item => !item.children))
const hasChildren = computed(() => list.value.filter(item => item.children))

const store = useAllDataStore()
const isCollapStatus = computed(()=>store.state.isCollapStatus)






// const clickMenu=(item) => {
//   router.push(item.path)
// }

</script>

<style scoped lang="less">
.icons{
  width:18px;
  height:18px;
  margin-right:5px;
}

.el-menu{
  border-right:none;
  h3{
    text-align:center;
    line-height:48px;
    color:#fff;
  }
}
// h3{
//   text-align:center;
//   line-height:48px;
//   color:#fff;
// }
.el-aside{
  height:100%;
  background-color:#545c64;
}
</style>